<script setup lang="ts">
import { ref } from 'vue';
import axios from '../api/request.ts';
import { useRouter } from 'vue-router';
import { message, Form as aForm, FormItem as aFormItem, Select as aSelect, SelectOption as aSelectOption, Input as aInput, InputPassword as aInputPassword, Button as aButton } from 'ant-design-vue';

const router = useRouter();

const userType = ref('volunteer');
const phone = ref('');
const name = ref('');
const password = ref('');
const userCardNo = ref('');
const userXueyuan = ref('');
const userXuehao = ref('');

const register = async () => {
  console.log('注册信息:', {
    userType: userType.value,
    phone: phone.value,
    password: password.value,
  });
  try {
    await axios.post('/users/register', {
      userType: userType.value,
      phone: phone.value,
	  name: name.value,
      password: password.value,
	  userXuefen:0,
	  userXueshi:0.0,
	  userXuehao:userXuehao.value,
	  userXueyuan:userXueyuan.value,
	  userCardNo:userCardNo.value
    });
    message.success('注册成功');
    router.push('/');
  } catch (error) {
    console.error('注册错误:', error);
    message.error('注册失败');
  }
};

</script>

<template>
  <div class="container">
    <div class="box">
      <!-- 添加logo图片 -->
      <img src="@/assets/logo.png" alt="Logo" class="logo" />
      <h1>注册</h1>
      <a-form @submit.prevent="register" class="form">
        <a-form-item label="用户类型">
          <a-select v-model:value="userType">
            <!-- <a-select-option value="regular_user">普通用户</a-select-option> -->
            <a-select-option value="volunteer">志愿者</a-select-option>
            <a-select-option value="event_organizer">活动管理员</a-select-option>
            <!--          <a-select-option value="event_administrator">活动管理员</a-select-option>-->
          </a-select>
        </a-form-item>
		<a-form-item label="姓名">
		  <a-input v-model:value="name" />
		</a-form-item>
        <a-form-item label="电话">
          <a-input v-model:value="phone" />
        </a-form-item>
		<a-form-item label="身份证">
		  <a-input v-model:value="userCardNo" />
		</a-form-item>
		<a-form-item label="学院名称">
		  <a-input v-model:value="userXueyuan" />
		</a-form-item>
		<a-form-item label="学号">
		  <a-input v-model:value="userXuehao" />
		</a-form-item>
        <a-form-item label="密码">
          <a-input-password v-model:value="password" />
        </a-form-item>
        <a-form-item class="form-item-centered">
          <a-button type="primary" html-type="submit">注册</a-button>
          <router-link to="/">登录</router-link>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style scoped>
/* 容器用于整个登录部分，水平和垂直居中内容 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 占满整个视口高度 */
  background-color: #f0f2f5; /* 可选：浅背景颜色 */
}

/* 包含表单和标题的背景框 */
.box {
  padding: 20px;           /* 框内填充 */
  background-color: white; /* 框的白色背景 */
  border-radius: 8px;      /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 微妙的阴影增加深度 */
  width: 100%;
  max-width: 420px;        /* 框的最大宽度 */
}

/* 框内的表单 */
.form {
  width: 100%;             /* 占满框的全宽 */
}

/* 居中的标题 */
h1 {
  text-align: center;      /* 文本居中 */
  margin-bottom: 20px;     /* 标题下方的间距 */
}

/* 居中的表单项 */
a-form-item {
  width: 100%;             /* 占满框的全宽 */
}

/* 自定义类以在表单项内居中按钮和链接 */
.form-item-centered {
  display: flex;           /* 使用flexbox进行对齐 */
  flex-direction: column;  /* 垂直堆叠子元素 */
  align-items: center;     /* 水平居中子元素 */
}

/* 全宽按钮，带有下方的间距 */
a-button {
  width: 100%;             /* 占满表单项的全宽 */
  margin-bottom: 10px;     /* 按钮下方的间距 */
}

/* 居中且样式化的router链接 */
router-link {
  display: block;          /* 块级元素占满全宽 */
  text-align: center;      /* 文本居中 */
  margin-top: 10px;        /* 链接上方的间距 */
}

.logo {
  width: 100px;             /* 设置logo图片的宽度 */
  margin-bottom: 20px;      /* 图片下方的间距 */
}
</style>